<!--
 * @Description: 第四章-路由传参
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-27 01:33:03
-->
<template>

    <div>
        <h1>第四章-路由传参</h1>
        <hr />
        <div>
            <div>
                <table cellspacing="0" class="table" border="1">
                    <thead>
                        <tr>
                            <th>品牌</th>
                            <th>价格</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr :key="item.id" v-for="item in data">
                            <td>{{ item.name }}</td>
                            <td>{{ item.price }}</td>
                            <td>
                                <button @click="toDetail1(item)">传参query</button>
                                <button @click="toDetail2(item)">传参params</button>
                                <button @click="toDetail3(item)">动态路由参数</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { data } from '@/components/list.json'

const router = useRouter()

type Item = {
    name: string;
    price: number;
    id: number;
}

// 使用 useRoute 的 query
const toDetail1 = (item: Item) => {
    // query 只能接受对象
    router.push({
        path: '/footer/reg2',
        query: item
    })
}

// 使用 Params路由传参，不能用path，只能用name
// 这种做法已经失效
// 
// [Vue Router warn]: Discarded invalid param(s) "name", "price", "id" when navigating. See https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22 for more details.
const toDetail2 = (item: Item) => {
    // params 只能接受对象
    router.push({
        name: 'reg2',
        params: item
    })
}

// 动态路由传参
const toDetail3 = (item: Item) => {
    console.log('toDetail3 item: ', item)
    router.push({
        name: 'reg3',
        params: {
            id: item.id
        }
    })
}

</script>
<style scoped></style>